import { useState, useEffect } from 'react'
import axios from 'axios'

function Counter(props) {
  const [count, setCount] = useState(() => {
    return Math.pow(props.num, 2)
    // return props.num ** 2
  })
  return (
    <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}

function App() {
  const [name, setName] = useState(() => {
    return '阿炜'
  })

  const [list, setList] = useState([])

  useEffect(() => {
    const getData = async () => {
      const res = await axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get')
      console.log(res);

      setList(res.data.data)
    }

    getData()
  }, [])

  return (
    <div>
      <h1>Hello {name}</h1>
      <Counter num={10}></Counter>

      <ul>
        {
          list.map((item, index) => {
            return <li key={item.name}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}

export default App;